<template>
	<view class="mbti-groups">
		<mBack ref="mBack" @getGameResult="handleBack"></mBack>
		<view class="mbti-groups-content flex-column-start-center" :style="{'background-image': `url(${bgUrl})`}">
			<view class="top-box" :style="{height:contentTop+'rpx'}"></view>
			<view class="empty-content flex-column-start-center" v-if="!firendNum">
				<view class="empty-icon">
					<image class="cover-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0c6b9f982d894da7b24164376cbb3575.png"
						mode="aspectFill"></image>
				</view>
				<view class="empty-icon-tip flex-row-center-center">暂无贴友</view>
				<view class="empty-tip-line flex-row-center-center">添加贴贴好友，连续轻拍Clackey按钮</view>
				<view class="empty-tip-line flex-row-center-center" style="margin-bottom: 60rpx;">可发送“TapTap”信号给好友
				</view>
				<view class="empty-tip-line flex-row-center-center">分组可群发组内所有好友</view>
			</view>
			<view class="content-box" v-else>
				<scroll-view ref="scrollView" :scroll-y="true" class="scroll-content" :show-scrollbar="false"
					:scroll-with-animation="true">
					<view class="groups-list flex-row-start-start">
						<view class="group-item flex-column-end-center" v-for="(item,index) in groupList" :key="index"
							:class="{'group-item-choosed':item.hasTop===0}" @click="handleGroupItemClick(item,index)">
							<view class="group-choose-btn" :class="{'btn-choosed':item.hasTop===0}"
								@click.stop="handleToTopGroup(item.id)"></view>
							<view class="group-avatar-list flex-row-start-center">
								<view class="group-avatar-item flex-row-center-center"
									v-for="(citem,cindex) in item.friendRelationshipList" :key="cindex"
									:class="{'group-avatar-item-hide':(item.friendRelationshipList.length>5)&&cindex>=4}">
									<image class="cover-img" :src="citem.headUrl" style="border-radius: 50%;"
										mode="aspectFill">
									</image>
								</view>
								<view class="group-avatar-item flex-row-center-center"
									v-if="item.friendRelationshipList.length>5">
									<view class="avatar-more-icon"></view>
									<view class="avatar-more-icon"></view>
									<view class="avatar-more-icon"></view>
								</view>
							</view>
							<view class="group-name">{{item.friendGroup}}</view>
						</view>

						<view class="group-item flex-row-center-center" @click="handleAddGroup">
							<image class="group-item-add-icon"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2c2fcc9c0df34646935b69533bd771db.png"
								mode="aspectFill"></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- <mbtiGroupDetail ref="mbtiGroupDetail"></mbtiGroupDetail> -->
	</view>
</template>

<script>
	import mbtiGroupDetail from "@/components/m-mbti/mbti-group-detail.vue"
	import mBack from "@/components/m-back/index.vue"
	import {
		getFriendList,
		getFriendGropList,
		toTopGroup
	} from "@/api/mbti.js"
	import {
		getMbtiSourceByKey
	} from "@/utils/mbti-source"
	export default {
		components: {
			mbtiGroupDetail,
			mBack
		},
		data() {
			return {
				bgUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d394a848c52a40a0b7fc9baf22ba6a01.png",
				screenWidth: 375,
				rpxMenuButtonHeight: 64,
				rpxMenuButtonTop: 100,
				contentTop: 300,
				firendNum: 1,
				groupList: [],
				firstIn: true
			}
		},
		created() {
			try {
				let screenWidth = uni.getStorageSync('screenWidth')
				if (screenWidth) {
					this.screenWidth = screenWidth
				} else {
					this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
					uni.setStorageSync("screenWidth", this.screenWidth)
				}
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let {
					top,
					height
				} = menuButtonInfo

				let rpxHeight = this.pxToRpx(height)
				let rpxTop = this.pxToRpx(top)
				this.rpxMenuButtonHeight = rpxHeight
				this.rpxMenuButtonTop = rpxTop

				this.contentTop = rpxTop + rpxHeight + 66


			} catch (error) {
				//TODO handle the exception
			}
		},
		onLoad() {
			this.handleGetFirendList()
			this.handleGetFriendGropList()
			setTimeout(() => {
				this.firstIn = false
			}, 200)
		},
		onShow() {
			if (!this.firstIn) {
				this.handleGetFirendList()
				this.handleGetFriendGropList()
			}
		},
		onUnload() {
			this.firstIn = false
		},

		methods: {
			pxToRpx(px) {
				const designWidth = 750; // 设计稿宽度
				const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
				return rpx;
			},
			handleBack() {
				uni.navigateBack()
			},
			handleGroupItemClick(item, index) {
				uni.navigateTo({
					url: `/pages/mbti/mbti-group-detail?id=${item.id}`
				})
			},
			handleToTopGroup(id) {
				toTopGroup(id).then(res => {
					uni.showToast({
						title: "置顶成功",
						icon: "none"
					})
					this.handleGetFirendList()
					this.handleGetFriendGropList()
				})
			},
			handleGetFirendList() {
				try {
					getFriendList().then(res => {
						let list = res.data.data

						if (list) {
							this.firendNum = [...list].length
						} else {
							this.firendNum = 0
						}
					})
				} catch (error) {
					//TODO handle the exception
					this.firendNum = 0
				}


			},
			handleGetFriendGropList() {
				getFriendGropList().then(res => {
					let list = res.data.data
					console.log("分组", list);
					let code = res.data.code
					// if (code == '401') {
					// 	this.handleGetFriendGropList()
					// 	return
					// }

					this.groupList = list

					// this.groupList = [...list].map((item, index) => {
					// 	item.friendRelationshipList.forEach((fitem, findex) => {
					// 		let source = getMbtiSourceByKey(item.mbti)
					// 		let mbtiAvatar = ""
					// 		if (source) {
					// 			mbtiAvatar = source.smallAvatar
					// 		}
					// 		fitem.mbtiAvatar = mbtiAvatar
					// 	})

					// 	return item
					// })
				})
			},
			handleAddGroup() {
				console.log("添加分组");
				uni.navigateTo({
					url: `/pages/mbti/mbti-group-detail?groupLength=${this.groupList.length}`
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.mbti-groups {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		background-color: #ededed;
		box-sizing: border-box;

		.mbti-groups-content {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;

			.top-box {
				width: 100%;
			}

			.empty-content {
				width: 100%;
				flex: 1;
				margin-top: 144rpx;

				.empty-icon {
					width: 198rpx;
					height: 200rpx;
					margin-bottom: 70rpx;

				}

				.empty-icon-tip {
					width: 100%;
					height: 44rpx;
					font-weight: 300;
					font-size: 32rpx;
					color: #979797;
					line-height: 44rpx;
					margin-bottom: 176rpx;

				}

				.empty-tip-line {
					width: 100%;
					height: 60rpx;
					font-weight: 300;
					font-size: 32rpx;
					color: #153135;
					line-height: 60rpx;
				}
			}

			.content-box {
				width: 100%;
				flex: 1;
				overflow: hidden;

				.groups-list {
					width: 100%;
					padding: 8rpx 48rpx;
					flex-wrap: wrap;

					.group-item {
						position: relative;
						width: calc(50% - 10rpx);
						height: 200rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						margin-bottom: 20rpx;


						&:nth-child(2n) {
							margin-left: 20rpx;
						}

						.group-item-add-icon {
							width: 52rpx;
							height: 52rpx;
						}

						.group-choose-btn {
							position: absolute;
							right: 16rpx;
							top: 16rpx;
							width: 32rpx;
							height: 32rpx;
							border: 2rpx solid #CECECE;
							border-radius: 50%;
						}

						.btn-choosed {
							background-color: #6DD400;
							border-color: #B0FF5C;
						}

						.group-avatar-list {
							width: 100%;
							height: 48rpx;
							margin-bottom: 18rpx;
							padding: 0rpx 20rpx;

							.group-avatar-item {
								width: 48rpx;
								height: 48rpx;
								border-radius: 50%;
								margin-right: 10rpx;

								&:last-child {
									margin-right: 0rpx;
								}

								.avatar-more-icon {
									width: 4rpx;
									height: 4rpx;
									background: #979797;
									margin-right: 4rpx;

									&:last-child {
										margin-right: 0rpx;
									}
								}
							}

							.group-avatar-item-hide {
								display: none;
							}
						}

						.group-name {
							width: 100%;
							height: 42rpx;
							margin-bottom: 16rpx;
							font-weight: 300;
							font-size: 30rpx;
							color: #494949;
							line-height: 42rpx;
							padding: 0rpx 20rpx;
						}

					}

					.group-item-choosed {
						box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(109, 212, 0, 0.5);
					}
				}

			}
		}

	}
</style>